<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name='format-detection' content='telephone=no' />
<title>人车人</title>
<link rel="icon" href="/assets/img/titleico.ico" type="image/x-icon">
<link rel="stylesheet" href="/assets/css/common.css" />
<style>
	body {
		background-color: #f2f2f2;
		position: relative;
	}
	
	header {
		height: 40px;
		overflow: hidden;
		position: relative;
		border-bottom: 1px solid #ccc;
	}
	
	header h2 {
		text-align: center;
		line-height: 40px;
		font-weight: normal;
		font-size: 18px
	}
	
	header .icon {
		width: 30px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-align-items: center;
		align-items: center;
    	-webkit-justify-content: flex-end;
    	justify-content: flex-end;
    	padding-right: 19px
	}
	
	header .user {
		right: 0;
		left: inherit;
		padding-right: 19px;
	}
	
	header .icon img {
		width: 12px;
	}
	
	header .user img {
		width: 20px;
	}
	
	header .user a {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	
	#app {
		margin-top: 19px;
		padding: 0 10px 10%;
	}
	
	#app .wrapper {
		border-radius: 5px;
		background-color: #fff;
		padding: 7px;
		padding-bottom: 15%;
	}
	
	#app .wrapper .title {
		height: 38px;
		-webkit-align-items: center;
		align-items: center;
	}
	
	#app .wrapper .title img {
		width: 18px;
	}
	
	#app .wrapper .title span {
		color: #999;
		font-size: 12px;
		margin-left: 5px;
	}
	
	#app .wrapper .info {
		border-bottom: 1px solid #ccc;
		margin-top: 17px;
	}
	
	#app .wrapper .carmsg {
		margin: 15px 0 23px;
	}
	
	#app .wrapper .carmsg img {
		width: 67px;
		height: 51px;
		margin-right: 18px;
	}
	
	#app .wrapper .carmsg .msg {
		flex: 1;
	}
	
	#app .wrapper .carmsg .msg .tit {
		font-size: 13px;
		margin-bottom: 11px;
	}
	
	#app .wrapper .carmsg .msg .newprice span {
		font-size: 12px;
		color: #999;
	}
	
	#app .wrapper .carmsg .msg .newprice span.price {
		font-size: 13px;
		color: #e78904;
	}
	
	#app .wrapper .info ul li {
		-webkit-align-items: center;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #e6e6e6;
		position: relative;
	}
	
	#app .wrapper .info ul li:last-child {
		border: 0;
	}
	
	#app .wrapper .info ul li.mile {
		padding: 0;
	}
	
	#app .wrapper .info ul li.mile input {
		padding: 10px 0;
		flex: 1;
		margin-right: 60px;
	}
	
	#app .wrapper .info ul li.mile .unit {
		color: #e58804;
		position: absolute;
		top: 10px;
		right: 19px;
	}
	
	#app .wrapper .info ul li:last-child {
		border-bottom: 0;
	}
	
	#app .wrapper .info ul li img {
		width: 4px;
	}
	
	#app .wrapper .info ul li img.next {
		width: 8px;
		position: absolute;
	    top: 13px;
	    right: 0;
	}
	
	#app .wrapper .info ul li span {
		font-size: 14px;
	}
	
	#app .wrapper .info ul li span.key {
		width: 85px;
		color: #999;
		margin-left: 8px;
	}
	
	#app .wrapper .submit {
		margin-top: 28px;
		display: block;
		width: 100%;
		height: 43px;
		line-height: 43px;
		text-align: center;
		font-size: 18px;
		color: #fff;
		background-color: #f69000;
		border-radius: 5px;
		position: relative;
	}
	
	.bg {
		display: none;
		position: fixed;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    background-color: rgba(0,0,0,.5);
	}
	
	.more {
		display: none;
		position: fixed;
	   	width: 100%;
	   	bottom: 0;
	   	left: 0;
	   	background-color: #fff;
	   	z-index: 1;
	}
	
	.more .header {
	    position: relative;
	    height: 4rem;
	    line-height: 4rem;
	    text-align: center;
	}
	
	.more .header span {
	    position: absolute;
	    display: block;
	    height: 4rem;
	    line-height: 4rem;
	    top: 0;
	    left: 0;
	    padding: 0 2%;
	}
	
	.more .tabs {
	    padding: 4%;
	    font-size: 0;
	}
	
	.more .tabs .tab {
	    display: inline-block;
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	    width: 25%;
	    padding: 0.4rem;
	}
	
	.more .tabs .tab span {
	    display: block;
	    padding: 0.6rem 0;
	    text-align: center;
	    border-radius: 0.4rem;
	    border: 1px solid #eaeaea;
	    font-size: 1.4rem;
	}
	
	.more .tabs .tab.active span {
	    border-color: #f5a32d;
	    color: #f5a32d;
	}
	
	.state .tabs .item {
	    padding: 4%;
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	    border-radius: 0.4rem;
	    border: 1px solid #eaeaea;
	    -webkit-align-items: center;
	    align-items: center;
	    margin-bottom: 2%;
	    font-size: 16px;
	}
	
	.state .tabs .item.active {
	    border-color: #f5a32d;
	    color: #f5a32d;
	}
	
	.state .tabs .item span {
		margin-right: 0.4rem;
	}
	
	.state .tabs .item p {
		line-height: 2rem;
	}
	
	.panel-initial {
		display: none;
	    position: absolute;
	    top: 0;
	    z-index: 9;
	    background-color: #fff;
	    width: 100%;
	}
	
	.panel-initial .header {
	    padding: 10px 12px;
	    font-size: 16px;
	    position: fixed;
	    text-align: center;
	    top: 0;
	    left: 0;
	    width: 100%;
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	    background-color: #fff;
	    z-index: 10;
	    overflow: hidden;
	}
	
	.panel-initial .header span {
	    color: #f60;
	    position: absolute;
	    left: 0;
	    top: 0;
	    height: 44px;
	    line-height: 44px;
	    width: 56px;
	}
	
	.panel-initial .header p {
	    text-align: center;
	}
	
	.panel-initial .content {
	    padding-top: 40px;
	    min-height: 94vh;
	}
	
	.panel-initial .content .listwrapper li p.tit {
	    padding: 10px 12px;
	}
	
	.panel-initial .content .listwrapper li .citysbox {
	    padding: 5px 0;
	    background-color: #ddd;
	    overflow: hidden;
	    display: none;
	}
	
	.panel-initial .content .listwrapper li .citysbox a {
		float: left;
	    background-color: #fff;
	    width: 20%;
	    text-align: center;
	    padding: 5px 0;
	    margin: 5px 2.5%;
	    border-radius: 3px;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	
</style>
</head>
<body>
	<header>
		<div class="icon flexbox" id="back"><img src="/assets/img/order_back.png" /></div>
		<h2>精准定价</h2>
		<div class="icon user flexbox" id="back"><a href="#"></a><img src="/assets/img/order_user.png" /></div>
	</header>
		
	<section id="app">
		<div class="wrapper">
			<div class="title flexbox">
				<img src="/assets/img/qicheicon.png" />
				<span>精准定价</span>
			</div>
			<div class="info">
				<div class="carmsg flexbox">
					<img src="/assets/img/che300.jpg" />
					<div class="msg">
						<p class="tit" id="model_name"></p>
						<p class="newprice">
							<span>新车指导价：</span>
							<span class="price" id="newprice">--</span>
						</p>
					</div>
				</div>
				<ul id="carinfo">
					<li class='flexbox mile validate-hook' data-key="mileageNum" tip="行驶里程">
						<img src='/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png' />
						<span class='key'>行驶里程：</span>
						<input type="number" class='value' name="mileageNum" />
						<span class="unit">万公里</span>
						<img src='/assets/img/next.png' class='next' />
					</li>
					<li class='flexbox validate-hook' id="changecolor" data-key="carColor" tip="车身颜色">
						<img src='/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png' />
						<span class='key'>车身颜色：</span>
						<span class='value'></span>
						<img src='/assets/img/next.png' class='next' />
					</li>
					<li class='flexbox' id="changetransfer" data-key="mortgageNum">
						<img src='/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png' />
						<span class='key'>过户次数：</span>
						<span class='value'></span>
						<img src='/assets/img/next.png' class='next' />
					</li>
					<li class='flexbox' id="changemakedate" data-key="factoryDate">
						<img src='/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png' />
						<span class='key'>出产日期：</span>
						<span class='value'></span>
						<img src='/assets/img/next.png' class='next' />
					</li>
					<li class='flexbox validate-hook' id="changework" data-key="workstate" tip="工况状况">
						<img src='/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png' />
						<span class='key'>工况状况：</span>
						<span class='value'></span>
						<img src='/assets/img/next.png' class='next' />
					</li>
					<li class='flexbox validate-hook' id="changeinterior" data-key="interior" tip="车辆内饰">
						<img src='/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png' />
						<span class='key'>车辆内饰：</span>
						<span class='value'></span>
						<img src='/assets/img/next.png' class='next' />
					</li>
					<li class='flexbox validate-hook' id="changesurface" data-key="surface" tip="外观状况">
						<img src='/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png' />
						<span class='key'>外观状况：</span>
						<span class='value'></span>
						<img src='/assets/img/next.png' class='next' />
					</li>
				</ul>
			</div>
			<a href="javascript:;" class="submit" id="submit">提交</a>
		</div>
	</section>

	<div class="carcolor more" id="carcolor">
		<div class="header b_bor">
			<span class="close">取消</span>
			<p>选择颜色</p>
		</div>
		<div class="tabs">
			<div class="tab" data-val="米色"><span>米色</span></div>
			<div class="tab" data-val="白色"><span>白色</span></div>
			<div class="tab" data-val="灰色"><span>灰色</span></div>
			<div class="tab" data-val="红色"><span>红色</span></div>
			<div class="tab" data-val="棕色"><span>棕色</span></div>
			<div class="tab" data-val="蓝色"><span>蓝色</span></div>
			<div class="tab" data-val="黄色"><span>黄色</span></div>
			<div class="tab" data-val="紫色"><span>紫色</span></div>
			<div class="tab" data-val="黑色"><span>黑色</span></div>
			<div class="tab" data-val="橙色"><span>橙色</span></div>
			<div class="tab" data-val="银色"><span>银色</span></div>
			<div class="tab" data-val="金色"><span>金色</span></div>
			<div class="tab" data-val="绿色"><span>绿色</span></div>
		</div>
	</div>
	
	<div class="transfer more" id="transfer">
		<div class="header b_bor">
			<span class="close">取消</span>
			<p>过户次数</p>
		</div>
		<div class="tabs">
			<div class="tab" data-val="0"><span>0次</span></div>
			<div class="tab" data-val="1"><span>1次</span></div>
			<div class="tab" data-val="2"><span>2次</span></div>
			<div class="tab" data-val="3"><span>3次</span></div>
			<div class="tab" data-val="4"><span>4次</span></div>
			<div class="tab" data-val="5"><span>5次</span></div>
			<div class="tab" data-val="6"><span>6次</span></div>
			<div class="tab" data-val="7"><span>7次</span></div>
			<div class="tab" data-val="8"><span>8次</span></div>
			<div class="tab" data-val="9"><span>9次</span></div>
			<div class="tab" data-val="10"><span>10次</span></div>
			<div class="tab" data-val="11"><span>10次...</span></div>
		</div>
	</div>
	
	<div class="work_state more state" id="work_state">
		<div class="header b_bor">
			<span class="close">取消</span>
			<p>工况状况</p>
		</div>
		<div class="tabs">
			<div class="item flexbox" data-val="优">
				<span>优：</span>
				<p class="flex">发动机及变速箱运行良好且无维修；底盘及电气系统运行良好；按时保养且记录完整</p>
			</div>
			<div class="item flexbox" data-val="良">
				<span>良：</span>
				<p class="flex">发动机运行正常且无维修；变速箱、底盘及电气系统运行正常；保养记录较为完整</p>
			</div>
			<div class="item flexbox" data-val="中">
				<span>中：</span>
				<p class="flex">发动机工况一般，或有启动困难、轻微渗油、异常抖动等；变速箱及底盘无明显故障或异响；电气系统偶发故障但不影响安全行驶</p>
			</div>
			<div class="item flexbox" data-val="差">
				<span>差：</span>
				<p class="flex">发动机即将大修或者已经大修；变速箱及底盘某些部件老化需更换；电气系统易发故障且某些故障较难修复</p>
			</div>
		</div>
	</div>
	
	<div class="work_state more state" id="interior">
		<div class="header b_bor">
			<span class="close">取消</span>
			<p>车辆内饰</p>
		</div>
		<div class="tabs">
			<div class="item flexbox" data-val="优">
				<span>优：</span>
				<p class="flex">方向盘及按键无磨损；座椅及内饰崭新；车内无异味</p>
			</div>
			<div class="item flexbox" data-val="良">
				<span>良：</span>
				<p class="flex">方向盘及按键轻微磨损；座椅及内饰轻微磨损；车内轻微异味</p>
			</div>
			<div class="item flexbox" data-val="中">
				<span>中：</span>
				<p class="flex">方向盘及按键有明显磨损；座椅及内饰有几处较为明显的破损、污渍或霉斑；车内有异味</p>
			</div>
			<div class="item flexbox" data-val="差">
				<span>差：</span>
				<p class="flex">方向盘及按键有破损或者缺失；座椅及内饰有多处破损、污渍或者霉斑；车内有明显异味</p>
			</div>
		</div>
	</div>
	
	<div class="work_state more state" id="surface">
		<div class="header b_bor">
			<span class="close">取消</span>
			<p>外观状况</p>
		</div>
		<div class="tabs">
			<div class="item flexbox" data-val="优">
				<span>优：</span>
				<p class="flex">原厂漆，漆面轻微瑕疵；车窗玻璃光洁</p>
			</div>
			<div class="item flexbox" data-val="良">
				<span>良：</span>
				<p class="flex">几乎无色差，喷漆不超过2个面；车窗玻璃完好</p>
			</div>
			<div class="item flexbox" data-val="中">
				<span>中：</span>
				<p class="flex">喷漆不超过4个面，钣金不超过2处，略有色差；车窗玻璃有轻微裂痕</p>
			</div>
			<div class="item flexbox" data-val="差">
				<span>差：</span>
				<p class="flex">全车多处喷漆或钣金，色差较为明显，或者车身多处凹陷、裂痕或锈迹</p>
			</div>
		</div>
	</div>
	
	<div class="panel-initial makedate" id="makedate">
		<div class="header b_bor">
			<span class="close">关闭</span>
			<p>选择出产日期</p>
		</div>
		<div class="content">
			<ul></ul>
		</div>
	</div>
	
	<div class="panel-initial city" id="city">
		<div class="header b_bor">
			<span class="close">关闭</span>
			<p>选择地区</p>
		</div>
		<div class="content">
			<ul></ul>
		</div>
	</div>
	
	<div class="bg" id="bg"></div>
	
	<script src="/assets/js/fastclick.min.js"></script>
	<script src="/assets/js/jquery-3.1.1.min.js"></script>
	<script src="/assets/js/axios.min.js"></script>
	<script src="/assets/js/xxsg.js"></script>
	<script>
		$(function(){
			var app = $("#app"),
				bgDom = $("#bg"), // 遮罩层
				carcolor = $("#carcolor"), // 选择颜色
				transfer = $("#transfer"), // 过户次数
				workState = $("#work_state"), // 工况状况
				interior = $("#interior"), // 车辆内饰
				surface = $("#surface"), // 外观状况
				makedate = $("#makedate") // 出产日期
			
			$('#back').click(function(){
		    	window.history.go(-1)
		    })
			
			var data = _x.getSessionStorage("carConfigur")
			if (_x.isEmpty(data)) {
				_x.showTip("暂无数据！")
				return
			}
			
			$("#newprice").html(data.model_price + "万")
			$("#model_name").html(data.model_name)
			
			bgDom[0].addEventListener("touchmove", function(e) {
				e.preventDefault()
			})
			
			bgDom.click(function(){
				close()
			})
			
			$(".more").find("span.close").click(function(){
				close()
			})
            
			// 选择颜色
			$("#changecolor").click(function(){
				bgDom.show()
				carcolor.show()
			})
			
			carcolor.children(".tabs").children("div").click(function(){
				var val = $(this).data("val")
				$(this).addClass("active").siblings().removeClass("active")
				$("#changecolor").data("val", val)
				$("#changecolor").children(".value").html(val)
				bgDom.hide()
				carcolor.hide()
			})
			
			// 选择过户次数
			$("#changetransfer").click(function(){
				bgDom.show()
				transfer.show()
			})
			
			transfer.children(".tabs").children("div").click(function(){
				var val = $(this).data("val")
				$(this).addClass("active").siblings().removeClass("active")
				$("#changetransfer").data("val", val)
				var str = val
				if (str > 10) {
					str = "10次以上"
				}else {
					str += "次"
				} 
				
				$("#changetransfer").children(".value").html(str)
				bgDom.hide()
				transfer.hide()
			})
			
			// 工况状况
			$("#changework").click(function(){
				bgDom.show()
				workState.show()
			})
			
			workState.children(".tabs").children(".item").click(function(){
				var val = $(this).data("val")
				$(this).addClass("active").siblings().removeClass("active")
				$("#changework").data("val", val)
				$("#changework").children(".value").html(val)
				bgDom.hide()
				workState.hide()
			})
			
			$(".panel-initial").find("span.close").click(function(){
				$(".panel-initial").hide()
				app.show()
			})
			
			// 车辆内饰
			$("#changeinterior").click(function(){
				bgDom.show()
				interior.show()
			})
			
			interior.children(".tabs").children(".item").click(function(){
				var val = $(this).data("val")
				$(this).addClass("active").siblings().removeClass("active")
				$("#changeinterior").data("val", val)
				$("#changeinterior").children(".value").html(val)
				bgDom.hide()
				interior.hide()
			})
			
			// 外观状况
			$("#changesurface").click(function(){
				bgDom.show()
				surface.show()
			})
			
			surface.children(".tabs").children(".item").click(function(){
				var val = $(this).data("val")
				$(this).addClass("active").siblings().removeClass("active")
				$("#changesurface").data("val", val)
				$("#changesurface").children(".value").html(val)
				bgDom.hide()
				surface.hide()
			})
			
			
			//出产日期
			$("#changemakedate").click(function(){
				app.hide()
				var html = "<ul class='listwrapper'>"
				
				for (var i = data.max_reg_year; i >= data.min_reg_year - 1;i--) {
					html += "<li class='b_bor sel-hook' data-year='"+ i +"' show='0'><p class='tit'>"+ i +"年</p><div class='citysbox'></div></li>"
				}
				
				html += "</ul>"
				
				makedate.show().children(".content").html(html)
			})
			
			makedate.on("click","li.sel-hook",function(){
				var that = $(this),
					year = that.data("year"),
					citysBox = that.children(".citysbox")
				that.parent().find(".citysbox").hide()
				if (that.attr("show") === "0") {
					var nowDate = new Date(),
						nowYear = nowDate.getFullYear(),
						nowMonth = nowDate.getMonth() + 1,
						month = 12
					if (year == nowYear) {
						month = nowMonth
					}
					that.attr("show", "1")
					for (var i = 1; i <= month; i++) {
						var date = i
						if (i < 10) date = "0" + i
						citysBox.append("<a href='javascript:;' class='selcity-hook' data-date='"+ year +"-"+ date +"'>"+ i +"月</a>")
					}
				}
				citysBox.show()
			})
			
			makedate.on("click","a.selcity-hook",function(){
				var date = $(this).data("date")
				makedate.hide()
				$("#changemakedate").data("val", date).children(".value").html(date)
				app.show()
			})
			
			function close () {
				bgDom.hide()
				carcolor.hide()
				transfer.hide()
				workState.hide()
				interior.hide()
				surface.hide()
			}
			
			//去重
    		function unshift (arr) {
    			var newArr = []
    			for (var i = 0; i < arr.length; i++) {
    				if (newArr.indexOf(arr[i]) === -1) {
    					newArr.push(arr[i])
    				}
    			}
    			return newArr
    		}
			
			$("#submit").click(function(){
				var that = $(this)
				vaildate(function(obj, mark){
					if (mark) {
						obj.modelId = data.model_id
						that.html("<div class='textloading'></div>")
						axios.post("/makeprice/submitAssessment", _x.qsStringify(obj))
						.then(function(res){
							if (res.data.code == 1) {
								_x.removeSessionStorage("carConfigur")
								_x.removeSessionStorage("xxIdentify")
								_x.showTip(res.data.msg, {
									url: "/userCenter"
								})
							} else {
								_x.showTip(res.data.msg)
							}
							
						})
						.catch(function(){
							that.html("提交")
							_x.showTip("提交失败，请稍后重试！")
						})
					}
				})
			})
			
			function vaildate (fn) {
				var obj = {},
					mark = true
				$("#carinfo").children().each(function(){
					var that = $(this),
						key = that.data("key"),
						val = that.data("val")
					if (that.hasClass("validate-hook")) {
						if (that.hasClass("mile")) {
							val = that.children("input").val()
						}
						if (_x.isEmpty(val)) {
							mark = false
							_x.showTip("请选择" + that.attr("tip"))
							return false
						}
					}
					if (!_x.isEmpty(val)) {
						obj[key] = val
					}
				})
				fn(obj, mark)
			}
		})
	</script>
</body>
</html>
